<template>
	<view class="register">
		<custom-nav v-bind="navConfig"></custom-nav>
		<u--form class="register-form" labelWidth="219rpx" :labelStyle="formLabelStyle" :model="accountForm"
			errorType="toast" ref="registerFormRef">
			<u-form-item label="昵称" prop="nickName" borderBottom>
				<u--input v-model="accountForm.nickName" placeholderClass="input-placeholder" placeholder="请输入昵称"
					:customStyle="iptCustomStyle" />
			</u-form-item>
			<u-form-item label="账号" prop="userName" borderBottom>
				<u--input v-model="accountForm.userName" placeholderClass="input-placeholder" placeholder="请输入账号"
					:customStyle="iptCustomStyle" />
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom>
				<u--input v-model="accountForm.password" type="password" placeholderClass="input-placeholder"
					placeholder="请输入密码" :customStyle="iptCustomStyle" />
			</u-form-item>
			<u-form-item label="确认密码" prop="confirmPass" borderBottom>
				<u--input v-model="accountForm.confirmPass" type="password" placeholderClass="input-placeholder"
					placeholder="请输入确认密码" :customStyle="iptCustomStyle" />
			</u-form-item>
		</u--form>
		<u-button :customStyle="btnCustomStyle" size="large" text="注 册" :loading="btnIsLoading"
			@click="register"></u-button>
	</view>
</template>

<script>
	import navConfig from './config/navConfig.js'
	import {
		register
	} from '@/service/index.js'

	export default {
		data() {
			return {
				navConfig,
				btnIsLoading: false,
				btnCustomStyle: {
					width: '620rpx',
					height: '100rpx',
					background: '#0da25f',
					fontSize: '36rpx',
					color: '#FEFEFF',
					borderRadius: '20rpx',
					// boxShadow: '0rpx 8rpx 16rpx 0rpx rgba(45,108,254,0.26)'
				},
				formLabelStyle: {
					width: '100rpx',
					fontSize: '30rpx',
					color: '#2D3338'
				},
				iptCustomStyle: {
					border: 'none',
					background: '#FFFFFF',
					fontSize: '32rpx',
					color: '#57616B'
				},
				accountForm: {
					nickName: '',
					userName: '',
					password: '',
					confirmPass: '',
					phoneNumber: ''
				},
				rules: {
					nickName: [{
						required: true,
						message: '请填写昵称',
						trigger: ['change']
					}],
					userName: [{
						required: true,
						message: '请输入账号',
						trigger: ['change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change']
					}],
					confirmPass: [{
						required: true,
						message: '请输入确认密码',
						trigger: ['change']
					}, {
						validator: (rule, value, callback) => {
							return value === this.accountForm.password
						},
						message: '确认密码和密码不相同',
						trigger: ['change'],
					}]
				}
			};
		},
		onReady() {
			this.$refs.registerFormRef.setRules(this.rules)
		},
		methods: {
			async register() {
				try {
					await this.$refs.registerFormRef.validate()
					// await register(this.accountForm)
					this.$showToast('注册申请已提交！请等待审核~')
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (e) {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		&-form {
			background: #FFFFFF;
			border-radius: 15rpx;
			padding: 0rpx 24rpx;
			margin: 0 26rpx 66rpx;

			::v-deep .u-form-item {
				.input-placeholder {
					font-size: 30rpx;
					color: #C5C9D3;
				}
			}
		}
	}
</style>